<template>
  <view class="my_outer">
    <view class="my_header">
      <view class="my_header_left">
        <!-- <image :src="userInfo.avatar"></image> -->
        <u-avatar :src="userInfo.avatar" shape="square" size="126rpx"></u-avatar>
        <!-- <u-avatar src="https://cdn.uviewui.com/uview/swiper/swiper1.png" shape="square" size="126rpx"></u-avatar> -->
      </view>
      <view class="my_header_right">
        <view class="my_header_right_name">
          <text>{{ userInfo.nickname ? userInfo.nickname : "默认" }}</text>
        </view>
        <view class="my_header_right_id">
          <text>ID: {{ userInfo.userId }}</text>
        </view>
        <!-- <view class="my_header_right_venture" @click="toDividendPage" v-if="BourseUserInfo.isShareholder==1">
          <text>联创</text>
          <image src="@/static/my/join.png" />
        </view> -->
        <view class="my_header_right_venture_box">
          <view class="my_header_right_venture" @click="toDividendPage" v-if="BourseUserInfo.isShareholder==1">
            <text>联创</text>
            <image src="@/static/my/join.png" />
          </view>
          <!-- <view class="my_header_right_venture my_header_right_venture2" @click="toFeeAwardPage">
            <text>城市代理人</text>
            <image src="@/static/my/join.png" />
          </view> -->
        </view>
      </view>
    </view>
    <view class="my_material_card" v-if="BourseUserInfo.position != 0">
      <view class="my_material_card_grid">
        <view class="u-grid">
          <view class="u-grid-item">
            <view class="my_material_card_item border">
              <text>金豆资产</text>
              <text class="my_material_card_item_num" v-if="userProperty.goldBean || userProperty.goldBean == 0">{{
          userProperty.goldBean.toFixed(4)
        }}</text>
            </view>
          </view>
          <view class="my_material_card_item border">
            <text>云豆资产</text>
            <text class="my_material_card_item_num" v-if="userProperty.cloudBean || userProperty.cloudBean == 0">{{
          userProperty.cloudBean.toFixed(3)
        }}</text>
          </view>
          <view class="my_material_card_item border" v-if="userProperty.diamond || userProperty.diamond == 0">
            <text>钻石资产</text>
            <text class="my_material_card_item_num" v-if="userProperty.diamond >= 1000">{{
          (userProperty.diamond / 1000).toFixed(3)
        }}K</text>
            <text class="my_material_card_item_num" v-else>{{
            userProperty.diamond.toFixed(3)
          }}</text>
          </view>
          <view class="my_material_card_item " style="width: 200rpx;margin-left: -60rpx;">
            <text>代理库云豆</text>
            <text class="my_material_card_item_num" v-if="userProperty.proxy || userProperty.proxy == 0">{{
          userProperty.proxy.toFixed(3)
        }}</text>
          </view>
        </view>
      </view>
      <view class="my_material_card_btns">
        <view class="my_material_card_btns_left" @click="goCapitalTransferPage">
          <text>资产划转</text>
          <image src="@/static/my/entrance.png"></image>
        </view>
        <view class="my_material_card_btns_right" @click="goTransferRecordPage">
          <text>划转记录</text>
        </view>
      </view>
    </view>
    <view class="my_material_card2" v-else>
      <view class="my_material_card_grid">
        <view class="u-grid">
          <view class="u-grid-item">
            <view class="my_material_card_item border">
              <text>金豆资产</text>
              <text class="my_material_card_item_num" v-if="userProperty.goldBean || userProperty.goldBean == 0">{{
          userProperty.goldBean.toFixed(3)
        }}</text>
            </view>
          </view>
          <view class="my_material_card_item border">
            <text>云豆资产</text>
            <text class="my_material_card_item_num" v-if="userProperty.cloudBean || userProperty.cloudBean == 0">{{
          userProperty.cloudBean.toFixed(3)
        }}</text>
          </view>
          <view class="my_material_card_item" v-if="userProperty.diamond || userProperty.diamond == 0">
            <text>钻石资产</text>
            <text class="my_material_card_item_num" v-if="userProperty.diamond >= 1000">{{
          (userProperty.diamond / 1000).toFixed(3)
        }}K</text>
            <text class="my_material_card_item_num" v-else>{{
            userProperty.diamond.toFixed(3)
          }}</text>
          </view>
        </view>
      </view>
      <view class="my_material_card_btns">
        <view class="my_material_card_btns_left" @click="goCapitalTransferPage">
          <text>资产划转</text>
          <image src="@/static/my/entrance.png"></image>
        </view>
        <view class="my_material_card_btns_right" @click="goTransferRecordPage">
          <text>划转记录</text>
        </view>
      </view>
    </view>
    <view class="my_cell">
      <u-cell-group :border="false">
        <u-cell :isLink="true" @click="goAccountListPage">
          <view class="icon" slot="icon">
            <image src="@/static/my/interlinkage.png"></image>
          </view>
          <view class="title" slot="title"><text>账号同步中心</text></view>
        </u-cell>
        <!-- <u-cell :isLink="true" @click="toGoodsListPage">
          <view class="icon" slot="icon">
            <image src="@/static/my/goods.png"></image>
          </view>
          <view class="title" slot="title"><text>订单列表</text></view>
        </u-cell> -->
        <u-cell :isLink="true" @click="goSetPasswordPage" name="login">
          <view class="icon" slot="icon">
            <image src="@/static/my/key.png"></image>
          </view>
          <view class="title" slot="title"><text>设置登录密码</text></view>
        </u-cell>
        <u-cell :isLink="true" @click="goSetPasswordPage" name="pay">
          <view class="icon" slot="icon">
            <image src="@/static/my/lock.png"></image>
          </view>
          <view class="title" slot="title"><text>设置支付密码</text></view>
        </u-cell>
        <u-cell :isLink="true">
          <view class="icon" slot="icon">
            <image src="@/static/my/message.png"></image>
          </view>
          <view class="title" slot="title"><text>人工客服</text></view>
        </u-cell>
      </u-cell-group>
    </view>
    <view class="my_login_out">
      <view class="my_login_out_btn" @click="loginOut"><text>退出登录</text></view>
    </view>
  </view>
</template>

<script>
import { reqUserProperty, reqUserAccountList } from "@/api/my.js";
import { mapMutations, mapState } from "vuex";
import { reqBourseUserInfo } from '@/api/all.js'

export default {
  components: {},
  data() {
    return {
      userProperty: {},
      userInfo: {},
      BourseUserInfo: {}

    };
  },
  onShow() {
    this.getUserProperty();
    this.userInfo = uni.getStorageSync("userInfo")
      ? uni.getStorageSync("userInfo")
      : { avatar: "", nickname: "", userId: "" };
    this.getBourseUserInfo()

  },
  methods: {
    ...mapMutations(["setAccountListData"]),
    async getBourseUserInfo() {
      const result = await reqBourseUserInfo()
      if (result.code == 200) {
        this.BourseUserInfo = result.data
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 跳转划转记录页面
    goTransferRecordPage() {
      uni.navigateTo({
        url: "/pages/transferRecord/index",
      });
    },
    // 跳转资金划转页面
    goCapitalTransferPage() {
      uni.navigateTo({
        url: "/pages/capitalTransfer/index",
      });
    },
    // 跳转账户列表页面
    goAccountListPage() {
      // this.getUserAccountList();
      uni.navigateTo({
        url: `/pages/accountList/index`,
      });
    },
    // 跳转设置密码页面
    goSetPasswordPage(e) {
      uni.navigateTo({
        url: `/pages/setPassword/index?pagename=${e.name}`,
      });
    },
    // 跳转分红页面
    toDividendPage() {
      uni.navigateTo({
        url: `/pages/dividend/index`,
      });
    },
    // 跳转订单列表页面
    toGoodsListPage() {
      uni.navigateTo({
        url: `/pages/goodsList/index`,
      });
    },
    // 跳转城市钻石手续费奖励页面
    toFeeAwardPage() {
      uni.navigateTo({
        url: `/pages/feeAward/index`,
      });
    },
    // 请求用户资产信息
    async getUserProperty() {
      const result = await reqUserProperty();
      if (result.code == 200) {
        this.userProperty = result.data;
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 请求用户账号信息
    async getUserAccountList() {
      const result = await reqUserAccountList();
      if (result.code == 200) {
        this.setAccountListData(result.data ? result.data : []);
        uni.navigateTo({
          url: "/pages/accountList/index",
        });
      } else {
        uni.showToast({
          title: "账户列表请求失败",
          icon: "error",
        });
      }
    },
    // 退出登录
    loginOut() {
      uni.showLoading({
        title: "退出成功，即将跳转资讯",
      });
      setTimeout(() => {
        uni.hideLoading();
        uni.removeStorageSync("userInfo");
        uni.removeStorageSync("phone");
        uni.removeStorageSync("onlyCode");
        window.history.replaceState(null, null, "/");
        uni.navigateTo({
          url: "/pages/information/index",
        });
      }, 2000);
    },
  },
  computed: {
    ...mapState(['newKlineTimer', 'KlineTimer'])
  }
};
</script>

<style lang="scss" scoped>
.my_outer {
  width: 100vw;
  min-height: 100vh;
  background: #f5f0e5;

  .my_header {
    display: flex;
    padding-top: 74rpx;

    .my_header_left {
      width: 126rpx;
      height: 126rpx;
      margin-left: 48rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
        border-radius: 38rpx;
      }
    }

    .my_header_right {
      display: flex;
      flex-direction: column;
      margin-left: 36rpx;

      .my_header_right_name {
        // margin-top: 10rpx;

        text {
          font-size: 42rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #302b26;
        }
      }

      .my_header_right_id {
        text {
          font-size: 24rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #302b26;
        }
      }

      .my_header_right_venture_box {
        display: flex;
      }

      .my_header_right_venture {
        width: 122rpx;
        height: 41rpx;
        background: rgb(255, 125, 21, 0.2);
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 24rpx;
          font-family: Inter, Inter;
          font-weight: 500;
          color: #FF7D15;
        }

        image {
          width: 26rpx;
          height: 26rpx;
        }
      }

      .my_header_right_venture2 {
        width: 195rpx;
        margin-left: 20rpx;
      }
    }
  }

  .my_material_card {
    width: 750rpx;
    height: 519rpx;
    background: linear-gradient(to right, #ff7a12 0%, #ff9d3c 100%);
    border-radius: 38rpx;
    margin-top: 60rpx;

    .my_material_card_grid {
      padding-top: 68rpx;

      .u-grid {
        display: flex;
        justify-content: space-evenly;
      }

      .my_material_card_item {
        // margin-left: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 180rpx;

        text {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #ffffff;
          padding-left: 50rpx;
          // margin-right: 80rpx;
        }

        .my_material_card_item_num {
          width: 60%;
          word-wrap: break-word;
        }
      }

      .border {
        padding-right: 20rpx;
        border-right: 2rpx solid rgb(255, 255, 255, 0.6);
        margin-left: -40rpx;
      }
    }

    .my_material_card_btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 36rpx;

      .my_material_card_btns_left {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 40rpx;
        width: 167rpx;
        height: 61rpx;
        background: #fffaef;
        border: 2rpx solid #fffaef;
        border-radius: 17rpx;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-left: 20rpx;
        }

        text {
          font-size: 23rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #ff7d15;
        }
      }

      .my_material_card_btns_right {
        margin-right: 44rpx;
        width: 134rpx;
        height: 42rpx;
        border: 2rpx solid #fffaef;
        border-radius: 17rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 23rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #fef9f0;
        }
      }
    }
  }

  .my_material_card2 {
    width: 750rpx;
    height: 519rpx;
    background: linear-gradient(to right, #ff7a12 0%, #ff9d3c 100%);
    border-radius: 38rpx;
    margin-top: 60rpx;

    .my_material_card_grid {
      padding-top: 68rpx;

      .u-grid {
        display: flex;
        justify-content: space-evenly;
      }

      .my_material_card_item {
        // margin-left: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        // width: 180rpx;

        text {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #ffffff;
          // padding-left: 50rpx;
          // margin-right: 80rpx;
        }

        .my_material_card_item_num {
          width: 60%;
          word-wrap: break-word;
        }
      }

      .border {
        padding-right: 20rpx;
        border-right: 2rpx solid rgb(255, 255, 255, 0.6);
        margin-left: -40rpx;
      }
    }

    .my_material_card_btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 36rpx;

      .my_material_card_btns_left {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 40rpx;
        width: 167rpx;
        height: 61rpx;
        background: #fffaef;
        border: 2rpx solid #fffaef;
        border-radius: 17rpx;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-left: 20rpx;
        }

        text {
          font-size: 23rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #ff7d15;
        }
      }

      .my_material_card_btns_right {
        margin-right: 44rpx;
        width: 134rpx;
        height: 42rpx;
        border: 2rpx solid #fffaef;
        border-radius: 17rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 23rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #fef9f0;
        }
      }
    }
  }

  .my_cell {
    border-radius: 38rpx;
    margin-top: -160rpx;
    background: #f5f0e5;

    .icon {
      width: 38rpx;
      height: 38rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      text {
        font-size: 26rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #302b26;
        line-height: 80rpx;
      }
    }
  }

  .my_login_out {
    margin-top: 100rpx;
    display: flex;
    justify-content: center;
    padding-bottom: 100rpx;

    .my_login_out_btn {
      width: 545rpx;
      height: 85rpx;
      background: #5f5a50;
      border-radius: 38rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      text {
        font-size: 32rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #ffffff;
      }
    }
  }
}
</style>
